<template>
  <div class="custom-detail">
    <div class="title">巡检计划信息</div>
    <el-row :gutter="20">
      <el-col :span="8">
        <span class="label">巡检计划名称:</span>
        <span class="value">
          {{ form.name }}
        </span>
      </el-col>
      <el-col :span="8">
        <span class="label">检查类型:</span>
        <span class="value">{{
          getDictValue('inspection_inspection_type', form.typeId)
        }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">巡检园区:</span>
        <span class="value">{{ form.areaName }}</span>
      </el-col>
      <el-col :span="8" v-if="form.typeId === '2'">
        <span class="label">是否园区覆盖:</span>
        <span class="value">{{ getDictValue('yn', form.covered) }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">计划开始日期:</span>
        <span class="value">{{ form.planBeginTime }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">计划结束日期:</span>
        <span class="value">{{ form.planEndTime }}</span>
      </el-col>
      <el-col :span="8">
        <span class="label">计划类型:</span>
        <span class="value">{{
          getDictValue('inspection_plan_type', form.periodType)
        }}</span>
      </el-col>
      <el-col
        :span="8"
        v-if="
          form.periodType === '0' ||
          (form.typeId === '3' && form.periodType === '0')
        "
      >
        <span class="label">执行间隔:</span>
        <span class="value">每 {{ form.periodInterval }} 天 </span>
      </el-col>
      <el-col :span="8" v-if="form.periodType === '1'">
        <span class="label">执行间隔:</span>
        <span class="value"
          >每 {{ form.periodInterval }} 周 从第{{
            form.periodStart
          }}
          个工作日开始</span
        >
      </el-col>
      <el-col :span="8" v-if="form.periodType == '2'">
        <span class="label">执行间隔:</span>
        <span class="value"
          >每 {{ form.periodInterval }} 月 从第
          {{ form.periodStart }} 个工作日开始</span
        >
      </el-col>
      <el-col :span="8">
        <span class="label">备注:</span>
        <span class="value">{{ form.remark }}</span>
      </el-col>
    </el-row>
    <div class="title" style="margin-bottom: 10px">巡检路线</div>
    <Tabs
      @change="(val) => (currentComponentKey = val)"
      :currentKey="currentComponentKey"
      :tabsConfig="tabsConfig"
      :hasBorder="true"
    />
    <div class="body">
      <el-table
        class="table"
        :data="routeTableData[currentComponentKey]"
        stripe
      >
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="code" label="检查点编号" />
        <el-table-column prop="name" label="检查点名称" />
        <el-table-column prop="senceName" label="检查点场景" />
        <el-table-column prop="address" label="地理位置" />
        <el-table-column prop="imageFiles" label="检查点图片">
          <template #default="{ row }">
            <el-image
              class="image"
              v-for="(item, index) in row.imageFiles"
              :key="index"
              :src="item.fileUrl"
              fit="cover"
              :preview-src-list="
                row.imageFiles.map((i) => {
                  return i.fileUrl
                })
              "
              preview-teleported
              :initial-index="index"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="tablesName"
          label="关联检查表"
          :show-overflow-tooltip="true"
        />
      </el-table>
    </div>
    <div class="title">
      巡检人员
      <!-- 日检查：对应园区日检查类型人员，不可选择 -->
      <el-button
        v-if="form.typeId === '0'"
        type="primary"
        @click="handleAddUser({ checkType: '0', areaId: form.areaId }, false)"
        >园区对应巡检人员</el-button
      >
      <!-- 周检查：资产分公司安监部周检查类型人员，不可选择 -->
      <el-button
        v-if="form.typeId === '1'"
        type="primary"
        @click="
          handleAddUser(
            {
              areaId: ['1769649903898312705'],
              checkType: '1',
              patrolPost: ['6'],
            },
            false,
          )
        "
        >资产分公司安监部人员</el-button
      >
      <!-- 整改复查：资产分公司安监部整改复查类型人员，不可选择 -->
      <el-button
        v-if="form.typeId === '4'"
        type="primary"
        @click="
          handleAddUser(
            {
              areaId: ['1769649903898312705'],
              checkType: '4',
              patrolPost: ['6'],
            },
            false,
          )
        "
        >资产分公司安监部人员</el-button
      >
      <!-- 节假日检查：排班表人员 -->
      <el-button
        v-if="form.typeId === '5'"
        type="primary"
        @click="router.push({ name: 'personSchedule' })"
        >排班人员</el-button
      >
    </div>
    <div class="users">
      <!--      <div class="users-item" v-for="(item, index) of userIds" :key="index">-->
      <!--        {{ item.userName }}-->
      <!--      </div>-->
      <el-table :data="userIds" class="custom-table">
        <el-table-column label="序号" type="index" width="60px" />
        <el-table-column label="真实姓名" prop="userName" />
        <el-table-column label="联系方式" prop="userPhone" />
        <el-table-column label="所属园区" prop="areaName" />
      </el-table>
    </div>
    <tempalte v-if="form.periodType === '0'">
      <div class="title">每天巡检计划</div>
      <el-row :gutter="20">
        <el-col :span="8">
          <span class="label">检查点分配:</span>
          <span class="value">{{
            getDictValue(
              'inspection_plan_point_allocation_type',
              form.assignType,
            )
          }}</span>
        </el-col>
      </el-row>
      <el-row
        :gutter="20"
        v-for="(item, index) of form.assignRules"
        :key="index"
      >
        <el-col :span="8">
          <span class="label">开始时间-结束时间:</span>
          <span class="value">{{ item.startTime }} - {{ item.endTime }}</span>
        </el-col>
        <el-col :span="8" v-if="form.assignType === '1'">
          <span class="label">检查点:</span>
          <span class="value">{{ item.pointName }}</span>
        </el-col>
      </el-row>
    </tempalte>
    <UserDialog ref="userDialogRef" @change="handleUpdateUser" />
  </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import Tabs from '@/components/tabs/index.vue'
import UserDialog from './userDialog.vue'
import { useDict } from '@/hooks/useDict'
import { useRoute, useRouter } from 'vue-router'

const { dict, getDictStyle, getDictValue } = useDict()
const router = useRouter()
const route = useRoute()

const props = defineProps({
  detail: {
    type: Object,
    default: () => {},
  },
})
watch(
  () => props.detail,
  () => {
    if (props.detail.pkid) {
      handleDetail()
    }
  },
)
const form = ref({})
const userIds = ref([])
const routeTableData = ref([])
const tabsConfig = ref([])
const currentComponentKey = ref('')
const handleDetail = async () => {
  // 处理巡检园区
  const areas = []
  const areaId = []
  const areaName = []
  props.detail.areaIds.forEach((item) => {
    areas.push({
      value: item.areaId,
      name: item.areaName,
    })
    areaId.push(item.areaId)
    areaName.push(item.areaName.substring(0, item.areaName.indexOf('(')))
    const pointIds = []
    item.pointIds.forEach((point) => {
      pointIds.push({
        address: point.address,
        imageFiles: point.imageFiles,
        code: point.pointCode,
        pkid: point.pointId,
        name: point.pointName,
        position: point.position,
        senceName: point.senceName,
        tablesName: point.tableName,
      })
    })
    routeTableData.value[item.areaId] = pointIds
  })
  tabsConfig.value = areas
  currentComponentKey.value = tabsConfig.value[0]?.value || ''
  // 处理巡检人员
  if (['0', '1', '2', '3'].includes(props.detail.typeId)) {
    const userIdsArr = []
    const areaIds = props.detail.areaIds
    const userId = areaIds[0]?.userIds
    const userName = areaIds[0]?.userName?.split(',')
    const areaName = areaIds[0]?.areaName?.split(',')
    for (let i = 0; i < userId?.length; ++i) {
      userIdsArr.push({
        pkid: userId[i],
        userName: userName[i],
        areaName: areaName[i],
      })
    }
    // console.log(areaIds)
    userIds.value = userIdsArr
  }
  delete props.detail.areaIds
  form.value = { ...props.detail, areaName: areaName.join(','), areaId: areaId }
}

const userDialogRef = ref()
const handleAddUser = (params, isShowOperate = true) => {
  userDialogRef.value.dialogVisible = true
  userDialogRef.value.isShowOperate = isShowOperate
  userDialogRef.value.multipleSelection = JSON.parse(
    JSON.stringify(userIds.value),
  )
  userDialogRef.value.searchParams = {
    ...userDialogRef.value.searchParams,
    ...params,
  }
}
</script>
<style lang="scss" scoped>
.custom-detail {
  padding: 0 !important;
}
.title {
  font-size: 16px;
  font-weight: 500;
  color: #151515;
  position: relative;
  padding-left: 10px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;

  &::before {
    content: ' ';
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 16px;
    background: linear-gradient(0deg, #4575ee 0%, #6297f5 100%);
    border-radius: 2px;
    transform: translateY(-50%);
  }
  .el-button {
    margin-left: 10px;
  }
}
.tabs-wrapper {
  box-shadow: none;
  padding: 0;
  margin-bottom: 20px;
}
.table {
  margin-bottom: 30px;
  .image {
    margin-right: 5px;
    cursor: pointer;
    width: 40px;
    height: 40px;
  }
}
.users {
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  &-item {
    background-color: #ecf5ff;
    border-radius: 4px;
    color: #409eff;
    font-size: 14px;
    font-weight: 400;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
</style>
